<template>
  <div class="detail">
    <van-icon name="revoke" @click="goback" />
    <div><img :src="info.photos[0]" height="50px"/></div>
    <div class="title">
      <p>
        <span>{{ info.name }}</span
        ><span>{{ info.grade }}分</span>
      </p>
      <p>{{ info.category }}</p>
      <p>2022-02-01 上映</p>
      <p>{{ info.nation }} | {{ info.runtime }}分钟</p>
      <p>{{ info.synopsis }}</p>
    </div>
    <!-- 演员列表 -->
    <div class="personList">
      <p v-for="(item, index) in info.actors" :key="index">
        <span><img :src="item.avatarAddress" /></span>
        <span>{{ item.name }}</span>
        <span>{{ item.role }}</span>
      </p>
    </div>
    <!-- 底部收藏 -->
    <Linkaction></Linkaction>
  </div>
</template>
<script>
import Linkaction from "@/components/Linkaction.vue";
export default {
  data() {
    return {
      info: [],
    };
  },
  components: { Linkaction },
  mounted() {
    // 获取url的id参数
    console.log("detail", this.item);
    let filmId = +this.$route.params.filmId;
    if (!filmId) {
      this.$Toast.fail("非法访问");
      this.$router.back();
    }
    // 请求数据
    this.$store.dispatch("getInfoAction", { filmId: filmId });
    this.info = this.$store.state.getFilmInfo;
    console.log();
  },
  methods: {
    goback() {
      this.$router.back();
    },
  },
};
</script>
<style lang="less" scoped>
.detail {
  background: #eee;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
  background-position: center;
  div {
    img {
      width: 100%;
      height: 200px;
    }
  }
  .van-icon {
    position: absolute;
    color: white;
  }
  .title {
    background: #fff;
    padding: 5px;
    p {
      font-size: 14px;
      margin: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    p:first-child {
      display: flex;
      font-size: 16px;
      justify-content: space-between;
    }
  }
  .personList {
    margin-top: 10px;
    background: #fff;
    display: flex;
    p {
      margin: 10px;
      display: flex;
      flex-direction: column;
      font-size: 12px;
      img{
        width:auto;
        height: 100px;
      }
    }
  }
}
</style>
